<template>
  <el-dialog :visible.sync="modals" :title="$t('faHuo')" class="order_box" :before-close="handleClose" width="600px">
    <el-form ref="formItem" :model="formItem" label-width="140px" :rules="rules" @submit.native.prevent>
      <el-form-item v-if="formItem.transitWarehouseAddress" :label="$t('zhongZhuanCangShouHuoDiZhi')+'：'" prop="transitWarehouseAddress">
        {{ formItem.transitWarehouseAddress }}
      </el-form-item>
      <el-form-item :label="$t('touChengKuaiDi')" prop="firstMileStatus">
        <el-radio-group v-model="formItem.firstMileStatus">
          <el-radio label="Y">{{ $t('yes') }}</el-radio>
          <el-radio label="N">{{ $t('no') }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <div v-show="formItem.firstMileStatus==='Y'">
        <el-table border :data="formItem.storeMerOrderShips" max-height="400">
          <el-table-column :label="$t('kuaiDiGongSi')" :render-header="renderHeader">
            <template slot-scope="scope">
              <el-form-item label-width="0" :prop="'storeMerOrderShips.' + scope.$index + '.expressCode'" :rules="rules.expressCode">
                <el-select v-model="scope.row.expressCode" filterable clearable style="width: 100%">
                  <el-option v-for="(item, i) in express" :key="i" :value="item.expressCode" :label="item.name" />
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('kuaiDiDanHao')" :render-header="renderHeader">
            <template slot-scope="scope">
              <el-form-item label-width="0" :prop="'storeMerOrderShips.' + scope.$index + '.expressNumber'" :rules="rules.expressNumber">
                <el-input v-model="scope.row.expressNumber" clearable :placeholder="$t('qingShuRuKuaiDiDanHao')" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="90px" align="center">
            <template slot-scope="scope">
              <el-button type="danger" size="small" :disabled="formItem.storeMerOrderShips.length===1" @click="delFn(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="addShip" @click="addFn"><i class="el-icon-plus" /></div>
      </div>
    </el-form>
    <div slot="footer">
      <el-button size="small" type="primary" :loading="loading" @click="putSend('formItem')">{{ $t('confirm') }}</el-button>
      <el-button size="small" @click="cancel('formItem')">{{ $t('cancel') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { orderSendApi } from '@/api/halykOrder'
import { haExpressAllApi } from '@/api/sms'
import { checkPermi } from '@/utils/permission' // 权限判断函数
import { Debounce } from '@/utils/validate'
export default {
  name: 'OrderSend',
  data() {
    return {
      loading: false,
      formItem: {
        id: null,
        transitWarehouseAddress: '',
        firstMileStatus: 'Y',
        storeMerOrderShips: [{
          expressCode: '',
          expressNumber: ''
        }]
      },
      modals: false,
      express: [],
      exportTempList: [],
      tempImg: '',
      rules: {
        expressCode: [{ required: true, message: this.$t('qingXuanZeKuaiDiGongSi'), trigger: ['change', 'blur'] }],
        expressNumber: [{ required: true, message: this.$t('qingShuRuKuaiDiDanHao'), trigger: ['change', 'blur'] }]
      }
    }
  },
  mounted() {},
  methods: {
    renderHeader(h, obj) {
      return h('span', { class: 'cy-table-require' }, obj.column.label)
    },
    show(data) {
      this.formItem.id = data.id
      this.formItem.transitWarehouseAddress = data.transitWarehouseAddress
      this.modals = true
      this.getList()
    },
    checkPermi,
    // 物流公司列表
    getList() {
      haExpressAllApi().then(async(res) => {
        this.express = res
      })
    },
    // 提交
    putSend: Debounce(function(name) {
      this.$refs[name].validate((valid) => {
        if (valid || this.formItem.firstMileStatus === 'N') {
          this.loading = true
          if (this.formItem.firstMileStatus === 'N') {
            this.formItem.storeMerOrderShips = null
          }
          orderSendApi(this.formItem)
            .then((res) => {
              if (res) {
                this.$message.success(res.message || this.$t('caoZuoChengGong'))
              } else {
                this.$message.success(this.$t('caoZuoChengGong'))
              }

              this.modals = false
              this.$refs[name].resetFields()
              this.$emit('updata')
              this.loading = false
            })
            .catch(() => {
              this.loading = false
            })
        } else {
          this.$message.error(this.$t('qingTianXieXinXi'))
        }
      })
    }),
    handleClose() {
      this.cancel('formItem')
    },
    cancel(name) {
      this.loading = false
      this.modals = false
      this.$refs[name].resetFields()
      this.formItem.id = null
      this.formItem.storeMerOrderShips = [{
        expressCode: '',
        expressNumber: ''
      }]
    },
    addFn() {
      this.formItem.storeMerOrderShips.push({
        expressCode: '',
        expressNumber: ''
      })
    },
    delFn(index) {
      this.formItem.storeMerOrderShips.splice(index, 1)
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep{
  .cy-table-require::before {
    content: "*";
    color: red;
  }
}

.addShip{
  width: 100%;
  text-align: center;
  line-height: 22px;
  border: 1px dashed #1890ff;
  border-radius: 4px;
  margin-top: 10px;
  color: #1890ff;
  cursor: pointer;
}
</style>
